<template>
  <view
    :style="'direction:' + $t('dir')"
    :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'"
  >
    <x-drag />
    <!-- باش قىسىم -->
    <navbar :title="$t('info')" :back="false" :customContent="true">
      <template v-slot:content>
        <view class="navbar-content">
          <image
            src="/static/images/logo-kok.png"
            mode="width-fix"
            style="width: 300rpx; height: 70rpx"
          />
        </view>
      </template>
    </navbar>
    <notice :text="$t('dir') == 'rtl' ? uhturux.title : uhturux.title_cn" />

    <view class="main">
      <hover-ball />

      <!-- ئۇچۇر تىزىملىكى -->
      <view class="info-list">
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="info-card"
          @click="toggleCard(index)"
        >
          <view class="card-header">
            <text class="card-title">{{ item.title }}</text>
            <text
              class="status-badge"
              :class="
                item.audit_status === 1
                  ? 'online'
                  : item.audit_status === 2
                  ? 'warning'
                  : 'pending'
              "
              >{{
                item.audit_status === 1
                  ? $t("dir") == "rtl"
                    ? "تەستىقلاندى"
                    : "已上线"
                  : item.audit_status === 2
                  ? $t("dir") == "rtl"
                    ? "قايتۇرۇلدى،تەھرىرلەڭ"
                    : "已驳回，编辑重发"
                  : $t("dir") == "rtl"
                  ? "تەستىقلىنىۋاتىدۇ"
                  : "审核中"
              }}</text
            >
          </view>

          <view class="card-content" v-show="expandedCard === index">
            <template v-if="item.audit_status === 2">
              <view class="reason-box">
                <u-icon name="info" color="#ff976a" size="16" />
                <text class="reason-text">{{ item.return_reason }}</text>
              </view>
            </template>
            <view class="time-box">
              <u-icon name="clock" size="14" color="#999" />
              <text class="time-text">{{ item.created_at }}</text>
            </view>
          </view>
        </view>
      </view>

      <u-empty
        v-if="dataList.length === 0 && !isLoading"
        mode="list"
        icon="/static/images/empty.png"
        :text="$t('no_content')"
        style="padding-top: 250rpx"
      />

      <u-loadmore
        :status="loadmoreStatus"
        :loading-text="$t('loadingText')"
        loadmore-text="."
        nomoreText="."
        :isDot="true"
        :line="loadmoreStatus === 'nomore'"
        color="#bfbfbf"
      />
    </view>

    <tabbar :activeTab="1" />
  </view>
</template>

<script>
import notice from "../../components/notice/notice.vue";
import XDrag from "../../components/x-drag/x-drag.vue";
import HelpPopup from "../../components/help-popup/help-popup.vue";

export default {
  components: {
    notice,
    XDrag,
    HelpPopup,
  },
  data() {
    return {
      isLoading: false,
      loadmoreStatus: "loadmore",
      current_page: 1,
      last_page: 1,
      expandedCard: null, // يېڭى: قايسى كارتا ئېچىلغانلىقىنى ساقلايدۇ
      uhturux: {
        title: "مۇھىم ئۇقتۇرۇش",
        title_cn: "重要通知",
      },
      dataList: [],
    };
  },
  onLoad() {
    console.log("info bat");
    this.gettongzhi();
    // سىناق سانلىق مەلۇماتلارنى ئىشلەتكەچكە getInform() نى چاقىرمايمىز
    this.getInform();
  },
  onShow() {},
  async onPullDownRefresh() {
    this.current_page = 1;
    await this.getInform();
    uni.stopPullDownRefresh();
  },
  async onReachBottom() {
    if (this.current_page < this.last_page) {
      this.current_page += 1;
      await this.getInform();
    }
  },
  methods: {
    async gettongzhi() {
      const res = await this.$uniapi("/get_activity_list");
      if (res.code === 200) {
        this.uhturux = res.list;
      }
    },
    async getInform() {
      this.isLoading = true;
      this.loadmoreStatus = "loading";

      try {
        const res = await this.$uniapi("/back_information_lists", {
          page: this.current_page,
          pageSize: 20,
        });

        if (res.code === 200) {
          if (this.current_page === 1) {
            this.dataList = res.list.data;
          } else {
            this.dataList = [...this.dataList, ...res.list.data];
          }
          this.last_page = res.list.last_page;
          this.loadmoreStatus =
            this.current_page >= this.last_page ? "nomore" : "loadmore";
        }
      } catch (err) {
        console.error(err);
        this.loadmoreStatus = "loadmore";
      } finally {
        this.isLoading = false;
      }
    },
    gotodetail() {
      uni.navigateTo({
        url: "/pages/info/infoDeyail",
      });
    },

    // يېڭى: كارتىنى ئېچىش/يېپىش فۇنكسىيەسى
    toggleCard(index) {
      this.expandedCard = this.expandedCard === index ? null : index;
    },
  },
  // meyhods نى ئۆچۈرىمىز چۈنكى بۇ خاتا يېزىلغان
  // meyhods: {
  //   gotodetail() {
  //     console.log("atlayma");
  //     uni.navigateTo({
  //       url: "/pages/info/infoDeyail",
  //     });
  //   },
  // },
};
</script>

<style lang="scss" scoped>
.main {
  padding: 20rpx;
}

.navbar-content {
  width: 90vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-list {
  margin-top: 20rpx;
}

.info-card {
  background: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16rpx;
}

.card-title {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
  font-weight: 500;
  max-width: 400rpx;
  text-overflow: ellipsis;
  overflow: hidden;
}

.status-badge {
  padding: 4rpx 16rpx;
  border-radius: 100rpx;
  font-size: 24rpx;
  color: #ffffff;

  &.online {
    background: #07c160;
  }

  &.warning {
    background: #ff976a;
  }

  &.pending {
    background: #909399;
  }
}

.card-content {
  margin-top: 16rpx;
  border-top: 2rpx solid #f5f5f5;
  padding-top: 16rpx;
}

.reason-box {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
  padding: 16rpx;
  background: rgba(255, 151, 106, 0.1);
  border-radius: 8rpx;

  .reason-text {
    margin-left: 12rpx;
    color: #ff976a;
    font-size: 26rpx;
    line-height: 1.5;
  }
}

.time-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .time-text {
    margin-left: 8rpx;
    color: #999;
    font-size: 24rpx;
  }
}

.rtl {
  .card-title {
    margin-right: 0;
    margin-left: 20rpx;
  }

  .reason-text {
    margin-left: 0;
    margin-right: 12rpx;
  }

  .time-text {
    margin-left: 0;
    margin-right: 8rpx;
  }
}
</style>
